export const filletCorner = () => {
    return `
    <template>
    <div
      class="content"
   
    >
     <div :ref="echartsMap" id="mainChina"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, nextTick, onMounted, watch } from "vue";
  import "echarts";
  
  const state = reactive({
    option: {

      //图表离容器的距离
      grid: {
         left: "10%",
         top: "10%",
         right: "10%",
         bottom: "10%",
      },
      //X轴
      xAxis: {
         data: ['库里', '科比', '詹姆斯', '乔丹', '杜兰特', '欧文', '威少'],
         axisLabel: {
            textStyle: {
               color: '#D3E4FE',
               fontSize: 16
            }
         },
         axisTick: {
            show: false //隐藏X轴刻度尺
         },
  
      axisLine: {
        show: true,
        lineStyle: {
           color: '#00A8FF'
        }
     },
      },
      //y轴
      yAxis: {
        name:"(万元)", 
       
        nameTextStyle: {
            color:"#97B2E0",
            padding:[0,0,-530,-10]
        },
        axisLabel: {
          textStyle: {
             color: '#D3E4FE',
             fontSize: 16
          }
       },
        axisTick:{
          show:false
      },
      splitLine: {
        show: false,
       
        },
      axisLine: {
        show: true,
        lineStyle: {
           color: '#00A8FF'
        },
        
     },
      },
      series: [{
         data: [2, 1, 4, 6, 1, 0, 1],
         label: {
            show: true,
            position: "top",
            distance: 0,
            color: "#D3E4FE",
            formatter: "{c}" + "MVP",
            offset:[0,-5]
         },
         name: '球星',
         //图表类型
         //折线图line,饼图pie，散点图scatter等等
         type: 'bar',
         barWidth: 30,
         itemStyle: {
            barBorderRadius: [20, 20, 0, 0],
            color: {
               x: 0,  //右
               y: 0,  //下
               x2: 0,  //左
               y2: 1,  //上
               colorStops: [
                  {
                     offset: 0.1,
                     color: '#00B4DB' // 0% 处的颜色
                  },
                  {
                     offset: 1,
                     color: '#0083B0' // 100% 处的颜色
                  }
               ]
            }
         }
      }]
   }
   
  });
  let echartsMapel = ref("");
  let opt = null;
  const echartsMap = (e) => (echartsMapel.value = e);
  const init = () => {
    let myChart = echarts.init(echartsMapel.value);
    myChart.setOption(state.option);
    const setOption = (dataObj) => {
      let opt = myChart.getOption();
      Object.assign(opt, dataObj);
      myChart.setOption(opt);
    };
    return setOption;
  };
  
  onMounted(() => {
    init();
  });
  </script>
  
  <style scoped >
  .content {
    position: relative;
    width: 100%;
    box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  }
  #mainChina {
    width: 100%;
    height: 600px;
    background-color: #00184F;
  }
  </style>
  
  
    `;
  };
  